<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('文章选择')" />
</head>
<style>
	body{height:auto;font-family: "Microsoft YaHei";}
	button{font-family: "SimSun","Helvetica Neue",Helvetica,Arial;}
</style>
<body class="hold-transition box box-main">
	<input id="articleId"   name="articleId"    type="hidden" value=""/>
	<input id="articleName" name="articleName"  type="hidden" value=""/>
	<div class="wrapper"><div class="treeShowHideButton" onclick="$.table.toggleSearch();">
		<label id="btnShow" title="显示搜索" style="display:none;">︾</label>
		<label id="btnHide" title="隐藏搜索">︽</label>
	</div>
		<form id="formId">
			<div class="select-list">
				<label>文章名称：</label>
				<input type="text" name="hotelName"/>
				<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
				<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
			</div>
		</form>
	</div>
	<div class="col-sm-12 select-table table-striped">
		<table id="bootstrap-table"></table>
	</div>
	<th:block th:include="include :: footer" />
	<script th:inline="javascript">
	    var prefix = ctx + "typing/article"
	    var articleId = [[${articleId}]];
		$(function() {
            var options = {
                url: prefix + "/list",
                modalName: "文章管理",
                onClickRow:function (row,$element) {
                    $("#articleId").val(row.articleId);
		    		$("#articleName").val(row.title);
		    		$('.info').removeClass('info');//移除class
                    $($element).addClass('info');//添加class
                },
                columns: [{
                    checkbox: false
                },
                {
                    field: 'articleId',
                    title: 'id',
                    visible: true
                },
                {
                    field: 'title',
                    title: '标题'
                },
                {
                    field: 'leibie',
                    title: '类别'
                }]
            };
            $.table.init(options);
        });
	</script>
</body>
</html>
